<template>
  <div class="goods">
    <div class="header">
      <el-input v-model="input" placeholder="请输入内容" @change="search"></el-input>
      <el-button type="primary">查询</el-button>
      <el-button type="primary">
        <router-link to="/add-goods" style="color: #fff;">添加</router-link>
      </el-button>
    </div>
    <div class="wrapper">
      <el-table :data="tableData" border>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="商品ID" width="100"></el-table-column>
        <el-table-column prop="title" label="商品名称" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="price" label="商品价格" width="100"></el-table-column>
        <el-table-column prop="num" label="商品数量" width="100"></el-table-column>
        <el-table-column prop="category" label="商品类目" width="100"></el-table-column>
        <el-table-column prop="image" label="商品图片" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="sellPoint" label="商品 卖点" show-overflow-tooltip></el-table-column>
        <el-table-column prop="descs" label="商品描述" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <pagination :currentPage="currentPage" :total="total" :pageSize="pageSize" @changePage="changePage"></pagination>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination.vue';
export default {
  components: {
    Pagination
  },
  data() {
    return {
      input: '',
      tableData: [],
      total: 33,
      pageSize: 8,
      currentPage: 1
    }
  },
  methods: {
    //搜索功能
    search(value) {
      this.currentPage = 1

      if (!value) {
        return
      }
      console.log(value);

    },
    //编辑
    handleEdit() { },
    //删除
    handleDelete() { },
    //接受子组件传过来的值进行操作
    changePage(page) {
      console.log(page)
    }
  }
}
</script>

<style scoped lang="less">
.goods {
  margin: 20px;
}

.header {
  display: flex;

  button {
    margin-left: 20px;
  }
}

.wrapper {
  margin: 20px 0;
}
</style>
